<template>
  <div>
    <button @click="comName = 'Left'">显示Left组件</button>
    <button @click="comName = 'Right'">显示Right组件</button>
    <component :is="comName"> </component>
    <hr />
    <Left @getData="saveLeftData"></Left>
    <hr />
    <Right @getData="saveRightData"></Right>
  </div>
</template>

<script>
import Left from "./components/Left.vue"
import Right from "./components/Right.vue"
export default {
  name: "App",
  data() {
    return {
      comName: "Left",
    }
  },
  // 注册组件
  components: { Left, Right },
  // 谁接受数据,谁定义函数
  methods: {
    saveLeftData(val) {
      console.log("接受到了子组件的数据", val)
    },
    saveRightData(val) {
      console.log("接受到了子组件的数据", val)
    },
  },
}
// 由于V3支持V2的绝大多数特性,在V3里面写V2语法都是可以跑起来的
</script>

<style></style>
